<template>
	<view :class="{'Lu-lists-box':ziliao}">
		
		<view class="Lu-lists-lists">
			<view class="Lu-lists-back" @click="navback()">
				<text class="iconfont icon-fanhui"></text>
			</view>
			<image :src='apiUrl + goodlists.cumulative_pic' style="width:100%;height: 6611rpx;"></image>
			
			<view class="Lu-lists-footer">
				<view class="Lu-lists-people">
					<text class="iconfont icon-goodlaba"></text><text>目前已经有<text class="Lu-lists-num">{{goodlists.cumulative_num}}</text>人提交意向加盟信息</text>
				</view>
				<view class="Lu-lists-name" v-show="ziliao">
					<input type="text" v-model="goodname" placeholder="请输入姓名（隐私加密 放心填写）" placeholder-style="color:#999999">
				</view>
				<view class="Lu-lists-phone" v-show="ziliao">
					<input type="number" v-model="goodphone" placeholder="请输入手机号（隐私加密 放心填写）" placeholder-style="color:#999999">
				</view>
				<view class="Lu-lists-city" v-show="ziliao">
					<input type="text" v-model="goodcity" placeholder="请输入加盟意向城市" placeholder-style="color:#999999">
				</view>
				<view class="Lu-lists-submit" v-if="ziliao" @click="submitgood">
					提交
				</view>
				<view class="Lu-lists-submit" v-else @click="tianxie">
					填写资料
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl','tabbarid'])
		},
		data(){
			return{
				goodlists:{},
				goodid:'',
				goodname:'',
				goodphone:'',
				goodcity:'',
				ziliao:false
				
			}
		},
		onLoad:function(option){
			this.goodid = option.id
			console.log(option.id)
			uni.request({
				url:this.apiUrl+ 'api/good_article_details',
				data:{
					id:this.goodid 
				},
				header:{
					openid:this.openId
				},
				method:'POST',
				success: (res) => {
					console.log(res.data.data)
					this.goodlists = res.data.data
				}
			})
		},
		methods:{
			tianxie(){
				this.ziliao = true
			},
			navback(){
				uni.navigateBack({
					delta:1
				})
			},
			submitgood(){
				var _this = this
				if(this.goodname == '' || this.goodphone == '' || this.goodcity == ''){
					uni.showModal({
					    title: '请输入完整信息',
					    content: '请输入完整信息',
					    success: function (res) {
					        if (res.confirm) {
					           
					        } else if (res.cancel) {
					            
					        }
					    }
					})
				}else{
					uni.request({
						url:this.apiUrl+'api/good_project_intention_insert',
						method:"POST",
						header:{
							openid:this.openId
						},
						data:{
							agent_id:this.goodid,
							name:this.goodname,
							phone:this.goodphone,
							city:this.goodcity
						},
						success: (res) => {
							uni.showModal({
							    title: res.data.msg,
							    content: res.data.msg,
							    success: function (res) {
									
							        _this.goodname = ''
									_this.goodphone = ''
									_this.goodcity = ''
									_this.ziliao = false
							    }
							})
						}
						
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.Lu-lists-box{
		padding-bottom: 290rpx;
	}
	.Lu-lists-lists{
		position: relative;
		.Lu-lists-back{
			position: absolute;
			top: 80rpx;
			left: 40rpx;
			z-index: 5;
			color: #333;
			text-align: center;
			line-height: 54rpx;
			// background-color: #d0d0d0;
			border-radius: 50%;
			width: 54rpx;
			height: 54rpx;
		}
		.Lu-lists-footer{
			bottom: 0;
			padding: 20rpx 40rpx;
			position: fixed;
			background-color: #ffe773;
			.icon-goodlaba{
				color: #0088ff;
				margin-right: 20rpx;
				font-size: 30rpx;
			}
			.Lu-lists-people{
				width: 610rpx;
				height: 70rpx;
				padding: 0 30rpx;
				background-color: #fff;
				border-radius: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #333333;
				margin-bottom: 40rpx;
				.Lu-lists-num{
					font-size: 30rpx;
					color: #0088ff;
				}
			}
			.Lu-lists-name,.Lu-lists-phone,.Lu-lists-city{
				input{
					width: 610rpx;
					height: 70rpx;
					padding: 0rpx 30rpx;
					background-color: #fff;
					// border-radius: 70rpx;
					// line-height: 70rpx;
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 40rpx;
				}
				
			}
			.Lu-lists-submit{
				width: 390rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				background-color: #0088ff;
				color: #ffffff;
				margin: 0 auto;
				border-radius: 48rpx;
				font-size: 36rpx;
				letter-spacing: 8rpx;
			}
		}
	}
	
</style>
